Forms are the most complicated part on making a web page. You need many things to make a form function. You need the html code (the actual making of the form), and the cgi script that has to be on your server. When a user fills out a form and hits the submit button, it notifies your server and acceses the script. Then the script grabs the data, and sends it to your specified location. It could either mail it to you, or write it to another page, like a guestbook. Unfortunatly, I don't know scripting languages, but I do know how to make the html code for your form on your web page.
I'll just show you the code and what it would look like on your web page.
I'll start off by showing you how to make a basic text box.
 It's very easy to make this text box. It has a defined length to it, but a person is able to write a book inside of it. (No defined text length limit)
Below is the code I used:
<FORM >
<INPUT NAME="Example1" >
</FORM>
It's time to bring you on a step by step process of making your own servay. Follow along while making your own form for your web visitors to fill out. You may edit it in any way when you get the hang of things.
Lets Make a Servay!
•First lets ask the person their name and have it just be a simple text box like the one above. Just use this line of code:
Name:<input name ="name">
 
Explanation
<INPUT ... > is the tag indicates that some form of input is to be inserted.
With no TYPE specified, it defaults to a basic text box.
NAME="name" gives the name associated with the data that is returned.
Each field must have a unique name so the entries can be identified.
Next comes the rest of the text on the form.
•Now ask them their age.
Age: <input name="age" maxlength="3">
 
Explanation
MAXLENGTH="3" tells the browser to only allow 3 characters (letters including spaces) to be entered as data for this field.
•Just for your learning reasons, ask them for a password.
Enter your password (up to 8 characters):<INPUT TYPE="password" NAME="userpassword" SIZE=8 MAXLENGTH=8 VALUE="default">
 
Explanation
SIZE="8" tells the browser to make room for 8 characters to show within
the field. It makes the size of the text box itself.
MAXLENGTH="8" tells the browser to only allow 8 characters to be entered
as data for this field, just like in the previous step. (Making SIZE and MAXLENGTH the same is good practice. It shows the user how much text you are expecting them to enter.)
•Why don't you ask them if they like your page?
Do you like my page?<INPUT NAME="opinion" VALUE="Yes." >
 
Explanation
VALUE="Yes." tells the browser to put the text between the quotes into the field as the default answer. This is also shown in the password field in the previous step.
•Wondering what their favorite fruit is? (Me Neither)
What is your favorite fruit?
<P>
<SELECT NAME="fruit" >
<OPTION>Apples
<OPTION>Oranges
<OPTION>Pears
</SELECT>
 
Explanation
The <select name="fruit"> just gives you the topic of the question being asked.
The <option> apples gives you each choice to answer from. Here there are 3 choices. Apples, Oranges, or Pears. If you add more of the <option> in, you get more choices.
</select> tell your browser that the options are all done with.
The <input type="radio" tells your browswer it's a radio button, not a checkbox or a text field.
Of course, nobody would ever capitalize ibm or ever think about checking that option.
•Ask them to submit any comments that they might have.
Please enter your comments:
<TEXTAREA name="comments" ROWS=5 COLS=60>
Some default comments
</TEXTAREA>
 
Explanation
<TEXTAREA name="comments" ROWS=5 COLS=60> this is what defines the text
area. The tag for this type of input is <TEXTAREA>. It allows the other
modifiers listed and has a closing tag. There is the usual name= that says
what the data should be called when it is returned to your script. The next
two items define the size of the form. ROWS=5 says that there should be room
for 5 lines of text. The COLS=60 says that there should be room for 60
characters per line. You can make the box as big as you like, but keep in
mind that a traditional screen size is around 24 rows with 80 columns.
Some default comments: you can enter any default text you want in between
the opening <TEXTAREA> and the next </TEXTAREA> tag.
</TEXTAREA> this is the closing portion of the text area tag. It indicates
the end of this form element.
(The picture of it above is scaled to fit your window screen size, so if you have a small monitor,
it will look somewhat distorted)
•How do you make the 'Submit' and 'Reset' buttons?
<INPUT TYPE="SUBMIT" Value="Submit">
<INPUT TYPE="RESET" Value="Reset">
 
Explanation
I don't think you need an explaintion right? If you want to change the text inside from Submit to something else like 'Send' just edit the value="Submit"> to value="Send">.
Having fun yet? Well, lets put all this information you just learned together to make one large form. There are 2 tags that you must have at the begining and end of the entire form. They are <form> and </form> . You'll see this when I put all of the html code together below. You'll also notice that I added in the <p> and <br> in where I wanted the line breaks. You can do the same.
<FORM>
Name:<input name ="name">
<p>
Age: <input name="age" maxlength="3">
<p>
Enter your password (up to 8 characters):<INPUT TYPE="password" NAME="userpassword" SIZE=8 MAXLENGTH=8 VALUE="default">
<p>
Do you like my page?<INPUT NAME="Example4" VALUE="Yes." >
Now you have learned the basics of making forms. This form will not work because it needs a cgi-script from an internet server to retrieve the data and send it to you. I know that Geocities (see Free Web Utilities) has a script for this. Just read their instructions on using the script to make it work for you.
